import { Component, Vue, Watch } from 'vue-property-decorator';
import { queryTree } from "@/utils"
import { find, get } from "lodash";
/**
 * 这是一个树形列表数据处理的mixin类
 * 里面有相关默认配置和方法，初始化时自动请求数据
 *
 * @export
 * @class mixinTableTreeStore
 * @extends {Vue}
 */
@Component({
})
export class mixinTableTreeStore extends Vue {
    // 列表配置
    tableConfig: any = {
        // 列对齐方式 居中对齐
        align: "center",
        // 当内容过长时显示为省略号
        // tooltip 在火狐中有兼容问题
        showOverflow: 'title',
        border: 'full',
        rowKey: true,
        // 列表头宽度调整
        resizable: true,
        // 鼠标移到行是否要高亮显示
        'highlight-hover-row': true,
        // 如果缓存列表页面，这样写避免切换到其他页面后弹窗再次显示布局错乱
        "auto-resize": true,
        // 列表树形配置
        treeConfig: {
            children: "children",
            reserve: true,
            line: true
        }
    };

    // 数据源
    dataStore: any = {
        // 必须配置否则无法展示数据
        data: []
    }

    // 监听数据源
    @Watch("treeData", { immediate: true })
    updateTreeData(v: any) {
        // console.log(v)
        this.setTreeData(v)
    }

    setTreeData(v: any) {
        const me = this as any;
        // 将数据源数据赋值给dataStore.data
        // 这样写是为了支持树形数据本地查询
        me.dataStore.data = v;
        me.$nextTick(() => {
            // 展开所有菜单
            me.$refs.xTree.setTreeExpand(me.treeExpandRow, true);
        });
    }
    /**
     * 假如上一个页面是刷新页面，那么重载数据
     *
     * @param {*} to
     * @param {*} from
     * @param {*} next
     * @memberof mixinTableTreeStore
     */
    beforeRouteEnter(to: any, from: any, next: any) {
        next((instance: any) => {
            if (from.name == 'Refresh') {
                instance.loadView();
            }
        });
    }
    /**
     * 初始化时自动请求数据
     *
     * @memberof mixinTableTreeStore
     */
    created() {
        const me = this as any;
        me.getTree();
    }

    /**
     *  处理数据后重新刷新数据
     *
     * @memberof mixinTableTreeStore
     */
    loadView() {
        const me = this as any;
        me.getTree(true);
    }


    treeQueryConfig: object = {
        id: "id"
    };
    /**
     * 树形数据本地条件过滤
     * @param {*} params
     * @memberof mixinGridEnquiry
     */
    onQueryTreeClick(params: any) {
        const me = this as any;
        me.setTreeData(queryTree(me.treeData, params, me.treeQueryConfig))
    }

    formatterData({ cellValue, column }) {
        if (cellValue) {
            const dataName = column.params,
                item: any = find(get(this, dataName), {
                    value: cellValue.toString()
                });
            return item ? item.label : "";
        }
        return "";
    }
}
